<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>重置密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/api/oauth/static/layui/css/layui.css}" media="all">
</head>
<body>

<style>
    .reset-container {
        width: 420px;
        margin: 120px auto 0;
        padding: 20px;
        border: 1px solid #d0e7e3;
        border-radius: 10px;
        box-shadow: 3px 3px 8px #dad9d9; /* 阴影偏移量、模糊半径、扩散半径和颜色 */
    }

    .reset-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .footer-container {
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .title-item {
        margin-top: 25px;
        margin-bottom: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<form class="layui-form">
    <div class="reset-container">
        <div class="layui-form-item title-item">
            <h2>重置密码</h2>
            <!--            <h2>统一认证中心</h2>-->
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
                           lay-reqtext="请输入用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs8">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </div>
                        <input type="text" name="mobile" value="" lay-verify="required|phone" placeholder="手机号"
                               lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-mobile">
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div style="margin-left: 11px;">
                        <button type="button" class="layui-btn layui-btn-fluid layui-bg-blue"
                                lay-on="vercode">获取验证码
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-vercode"></i>
                </div>
                <input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
                       lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密码"
                       autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
                       placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid layui-bg-blue" lay-submit lay-filter="user-reset-submit">提交
            </button>
        </div>
        <div class="layui-form-item reset-other">
            <a href="#" lay-on="login" style="float: right; margin-top: 7px;">登录已有帐号</a>
        </div>
    </div>

    <div class="layui-trans footer-container">
        <p>© 2024 <a href="www.llyong.cn" target="_blank">www.llyong.cn</a></p>
    </div>
</form>

<script th:inline="javascript">
    let return_to = decodeURIComponent([[${return_to}]]);
</script>
<!-- HTML Content -->
<script th:src="@{/api/oauth/static/layui/layui.js}"></script>
<script th:src="@{/api/oauth/static/layui/jquery.js}"></script>
<script>
    layui.use(function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let util = layui.util;

        let protocol = window.location.protocol;
        let hostname = window.location.hostname;
        let port = window.location.port;
        let path = window.location.pathname;
        let search = window.location.search

        let url = `${protocol}//${hostname}:${port}${path}${search}`;
        let ctx;
        if (path.startsWith('/api')) {
            ctx = '/api';
        } else {
            ctx = '';
        }

        // 自定义验证规则
        form.verify({
            // 确认密码
            confirmPassword: function (value, item) {
                let passwordValue = $('#reg-password').val();
                if (value !== passwordValue) {
                    return '两次密码输入不一致';
                }
            }
        });

        //提交
        form.on('submit(user-reset-submit)', function (obj) {
            let field = obj.field;
            if (field.remember === 'on') {
                field.remember = true;
            } else {
                field.remember = false;
            }
            let loadIndex = layer.load(0);
            $.ajax({
                url: ctx + '/oauth/user/reset',
                type: 'POST',
                data: field,
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                dataType: 'json',
                success: function (res) {
                    layer.close(loadIndex);
                    //执行成功
                    if (res.code === '00000') {
                        //登入成功的提示与跳转
                        layer.msg('密码重置成功！', {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            // 重置成功跳转到登录页面
                            if (return_to) {
                                location.href = return_to;
                            } else {
                                location.href = ctx + '/oauth/login/form';
                            }
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 3000, shade: [0.3, '#000', true]});
                    }
                }
            })

        });


        // 普通事件
        util.on('lay-on', {
            // 获取验证码
            'vercode': function(obj){
                let isValid = form.validate('#reg-mobile'); // 主动触发验证，v2.7.0 新增
                // 验证通过
                if(isValid){
                    const sendCodeButton = document.getElementById('vercode');
                    let countdown = 60; // 倒计时时间（秒）
                    // 禁用按钮，防止重复点击
                    this.disabled = true;

                    const timer = setInterval(function () {
                        if (countdown > 0) {
                            sendCodeButton.innerHTML = `重新获取（${countdown}s）`;
                            countdown--;
                        } else {
                            clearInterval(timer);
                            sendCodeButton.disabled = false;
                            sendCodeButton.innerHTML = '发送验证码';
                            countdown = 60; // 重置倒计时时间
                        }
                    }, 1000);

                    let loadIndex = layer.load(0);
                    $.ajax({
                        url: ctx + '/oauth/user/send/code',
                        type: 'POST',
                        data: {username: $('#reg-mobile').val()},
                        success: function (res) {
                            layer.close(loadIndex);
                            //执行成功
                            if (res.code === '00000') {
                                //登入成功的提示与跳转
                                layer.msg('验证码已经发送至您的手机，请注意查收！', {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                }, function () {

                                });
                            } else {
                                layer.msg(res.msg, {icon: 2, time: 3000, shade: [0.3, '#000', true]});
                            }
                        }
                    })
                }
            },
            'login': function (obj) {
                if (return_to) {
                    location.href = return_to;
                } else {
                    location.href = ctx + '/oauth/login/form';
                }
            }
        });

        // 回车键绑定
        layui.$(document).keydown(function (e) {
            if (e.keyCode === 13) {
                layui.$('#user-reset-submit').click();
            }
        });
    });
</script>
</body>
</html>

